<template>
  <a-tabs v-model:activeKey="activeKey" tabPosition="left" size="small" @change="initActive">
    <a-tab-pane key="painetBox" tab="派盒子">
      <PainetBoxConfig ref="painetBoxConfigRef" />
    </a-tab-pane>
  </a-tabs>
</template>
<script setup>
import { reactive, ref } from 'vue';
import PainetBoxConfig from './upstream/painet-box-config.vue';

// 默认配置
const activeKey = ref();

function initValue() {
  // 默认tab位派盒子
  activeKey.value = 'painetBox';
  initActive();
}

// 派盒子配置的ref
const painetBoxConfigRef = ref();

// ref合集
const refs = reactive({
  painetBox: painetBoxConfigRef,
});

// 初始tab选项中的内容
function initActive() {
  try {
    // tab中除了默认的组件外，其它的都不会渲染到 DOM 中， 因此要给个延迟时间
    setTimeout(() => {
      refs[activeKey.value]?.initValue(activeKey.value);
    }, 100);
  } catch (error) {
    message.error('初始化数据错误!');
  }
}

defineExpose({
  initValue,
});
</script>